<!DOCTYPE html>

<head>
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <!-- import Vue before Element -->
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
  <!-- import element-ui JavaScript -->
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <div id="app">
    <el-tree ref="etr" :data="tdata" :props="defaultProps" highlight-current node-key="id"
      @node-click="handleNodeClick">
    </el-tree>

    <el-button type="primary" @click="modify">modify</el-button>
  </div>

</head>


<script>
  var demo = new Vue({
    el: "#app",
    data() {
      return {
        // orgData: [
        //   { ID: "DB0D5FCD-55B3-43CA-AC60-5824595945D7", Name: "房建专项设备", Num: "01", Code: "01", ParentId: "00000000-0000-0000-0000-000000000000" },
        //   { ID: "269CAEB2-ADA2-43A1-A77C-A7FDA33154B8", Name: "地基基础", Num: "03", Code: "103", ParentId: "DB0D5FCD-55B3-43CA-AC60-5824595945D7" },
        //   { ID: "7E252277-187F-492F-8A43-DFF0D5F2F248", Name: "电动液压千斤顶", Num: "02", Code: "10302", ParentId: "269CAEB2-ADA2-43A1-A77C-A7FDA33154B8" },
        //   { ID: "C27E6010-9B4E-4779-9C8F-73D41DB21FF5", Name: "电动液压千斤顶（5000kN）", Num: "01", Code: "1030201", ParentId: "7E252277-187F-492F-8A43-DFF0D5F2F248" }
        // ],
        a: 2,

        ddata: [{
          name: "A",
          id: 1,
          sub: []


        }, {
          name: "B",
          id: 2,
          sub: []

        }],
        defaultProps: {

          children: 'sub'
        },

        tdata: [
          {
            label: "数据列表页面",
            tid: 1,
            title: 'test',
            sub: [{
              label: "ttt",
              tid: 2,
            }

            ],
            dataBase: {
              url: '?action=uf_getdata',
              method: 'post',
              headers: '{"Content-Type":"application/json"}',
              actionservice: 'promain',
              editcolname: 'true'
            },
            actionGroup: {
              style: '',
              actions: [
                { name: 'cbNew', text: '新增', click: `console.log("######111")\nthis.$router.push({ name: 'produceContractAdd', params: {  }})` },
                { name: 'a', text: '去采购' },
                { name: 'b', text: '去印刷' },
                { name: 'c', text: '去制袋' }
              ]
            },

            open: `this.retrieve()`,

            filterGroup: [
              {
                name: 'progress',
                type: 'select',
                option: [
                  { label: '待提交', value: '待提交' },
                  { label: '待审核', value: '待审核' },
                  { label: '待排单', value: '待排单' },
                  { label: '采购中', value: '采购中' },
                  { label: '待印刷', value: '待印刷' },
                  { label: '印刷中', value: '印刷中' },
                  { label: '待生产', value: '待生产' },
                  { label: '待制袋', value: '待制袋' },
                  { label: '制袋中', value: '制袋中' },
                  { label: '已完成', value: '已完成' }
                ],
                label: '进度状态'
              },
              {
                name: 'daixing',
                type: 'select',
                async: `     
        let t = this.$store.getters.constant.condition
        let res=[]
        for (let item of t)res.push({label:item,value:item})
        return res      
      `,
                option: [],
                label: '袋型'
              },
              {
                name: 'dates_range',
                type: 'select',
                option: [
                  { label: '近3月', value: '3' },
                  { label: '近6月', value: '6' },
                  { label: '近12月', value: '12' },
                  { label: '自定义', value: '0' }
                ]
              },
              { name: 'filter', type: 'input', placeholder: '产品名称/任务单号', label: '关键字' }
            ],
            tabSelect: [
              {
                name: 'all',
                position: 'left',
                title: '全部',
                value: '全部',
                isDefault: '1',
                select: `this.params.auditingflag='全部'\nthis.params.status='正常'`
              },
              {
                name: 'check',
                position: 'left',
                title: '已审核',
                value: '已审核',
                isDefault: '0',
                select: `this.params.auditingflag='已审核'\nthis.params.status='正常'`
              },
              {
                name: 'nocheck',
                position: 'left',
                title: '未审核',
                value: '未审核',
                isDefault: '0',
                select: `this.params.auditingflag='未审核'\nthis.params.status='正常'`
              },
              {
                name: 'void',
                position: 'right',
                title: '已作废',
                value: '已作废',
                isDefault: '0',
                select: `this.params.auditingflag='全部'\nthis.params.status='已作废'`
              }
            ],
            data: `
  params: {
    filter: '',
    dates: 6,
    dates_range: [],
    dates1: '',
    dates2: '',
    progress: '',
    daixing: '',
    auditingflag: '全部',
    status: '正常',
    keywords:[],
    pagenum: 1,
    pagesize: 30
  },
  multipleSelection:[],
  dialogPictureUrl:[],  
  multipleUnadtSelection:[],
  multipleNormalSelection:[],
  progressColor:{
    "待提交":"gray",
    "待审核":"orange",
    "待排单":"red",
    "采购中":"pink",
    "待印刷":"yellow",
    "印刷中":"cyan",
    "待生产":"wathet",
    "待制袋":"blue",
    "制袋中":"purple"
  }
  `,
            methods: `
   
    onQueryClick(){
      this.retrieve()
    },
    handleSelectable(row,index){
      if (row.auditingflag === '制单' || row.auditingflag === '退单') {
        return false
      } else {
        return true
      }
    },
	  handlePreviewUploadFile(index, row) {
      this.dialogPictureUrl = []
      setTimeout(() => {
        this.dialogPictureUrl.push('http://www.jzdnkj.cn:9001/' + row.logofile)
        if (row.sub_producefiledetail && row.sub_producefiledetail.length > 0) {
          row.sub_producefiledetail.forEach(file => {
            this.dialogPictureUrl.push('http://www.jzdnkj.cn:9001/' + file.filepath)
          })
        }
        this.$nextTick(() => {
          this.$refs.previewDialogPicture.showViewer = true
        })
      }, 500)
    },
    handleEditContract(index, row) {
      this.$router.push({ name: 'produceContractEdit', params: { id: row.proid, callback: this.GET_ContractList }})
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
      this.multipleUnadtSelection = this.multipleSelection.filter(item => {
        return (item.auditingflag === '制单' || item.auditingflag === '退单') && item.status === '正常'
      })
      this.multipleAuditSelection = this.multipleSelection.filter(item => {
        return (item.auditingflag === '审核' || item.auditingflag === '审定') && item.status === '正常'
      })
      this.multipleNormalSelection = this.multipleSelection.filter(item => {
        return (item.auditingflag === '制单' || item.auditingflag === '退单') && item.status === '正常'
      })
    } 
  `,
            table: {
              border: 'true',
              cols: [
                {
                  k: '01',
                  selectable: 'handleSelectable',
                  type: 'selection',
                  prop: '',
                  width: '50',
                  isFixed: true,
                  align: 'center'
                },
                {
                  k: '02',
                  isSlot: true,
                  template: `{{scope.row.dates | fmtTimeToDate('yyyy-MM-dd')}}`,
                  isSortable: 'true',
                  label: '任务单日期',
                  prop: 'dates',
                  width: '150'
                },
                {
                  k: '03',
                  isSlot: true,
                  template: `<el-button type="text" @click="handleEditContract(scope.$index, scope.row)">{{scope.row.pronum}}</el-button> `,
                  isSortable: true,
                  label: '任务单号',
                  prop: 'pronum',
                  width: '140'
                },
                {
                  k: '04',
                  isSortable: true,
                  label: '产品名称',
                  prop: 'goodnamec',
                  width: '200'
                },
                {
                  k: '05',
                  isSortable: true,
                  isSlot: true,
                  template: `<el-button type="text" v-if="scope.row.logofile" @click="handlePreviewUploadFile(scope.$index, scope.row)">查看</el-button>
          <span v-else>暂无</span>`,
                  label: '图片',
                  prop: 'logofile',
                  width: '70'
                },
                {
                  k: '06',
                  isSortable: true,
                  label: '材料组成',
                  prop: 'maternamecs',
                  width: '200'
                },
                {
                  k: '07',
                  isSlot: true,
                  template: `{{scope.row.quty}}({{scope.row.quty | unitWan}})`,
                  isSortable: true,
                  label: '产品数量',
                  prop: 'quty',
                  width: '120'
                },
                {
                  k: '08',
                  isSortable: true,
                  label: '进度状态',
                  prop: 'progress',
                  width: '100',
                  isSlot: true,
                  template: `<span :class="'cell-badge cell-badge-'+(progressColor[scope.row.progress]||'pink')">{{scope.row.progress}}</span>`
                },
                {
                  k: '09',
                  isSortable: true,
                  label: '审核状态',
                  prop: '',
                  width: '100',
                  isSlot: true,
                  template: `<span v-if="scope.row.auditingflag === '制单' || scope.row.auditingflag === '退单'" class="cell-badge cell-badge-yellow">未审核</span>
        <span v-else class="cell-badge cell-badge-green">已审核</span>`
                }
              ]
            }
          }


        ],

        currentNode: null
      };
    },

    computed: {
      total() {
        return this.a * 5
      }

    },
    mounted() {

    },

    methods: {
      modify() {
        this.currentNode.sub.push({ name: "hehe", id: 9 })
      },
      handleNodeClick(data) {
        this.currentNode = data
      },
      loadNode(node, resolve) {

        if (node.level === 0) {
          return resolve(this.getChildren());
          // return resolve([{ name: 'region1' }, { name: 'region2' }]);
        }
        console.log(node.data.Name)
        return resolve(this.getChildren(node.data.ID));
      },
      getChildren(pid) {

        if (!pid) {
          return [{ ID: "DB0D5FCD-55B3-43CA-AC60-5824595945D7", Name: "房建专项设备", Num: "01", Code: "01", ParentId: "00000000-0000-0000-0000-000000000000" }]
        } else if (pid == "DB0D5FCD-55B3-43CA-AC60-5824595945D7") {
          return [
            { ID: "269CAEB2-ADA2-43A1-A77C-A7FDA33154B8", Name: "地基基础", Num: "03", Code: "103", ParentId: "DB0D5FCD-55B3-43CA-AC60-5824595945D7" },
          ]
        } else if (pid == "269CAEB2-ADA2-43A1-A77C-A7FDA33154B8") {
          return [
            { ID: "7E252277-187F-492F-8A43-DFF0D5F2F248", Name: "电动液压千斤顶", Num: "02", Code: "10302", ParentId: "269CAEB2-ADA2-43A1-A77C-A7FDA33154B8" },
          ]
        } else if (pid == "7E252277-187F-492F-8A43-DFF0D5F2F248") {
          return [
            { ID: "C27E6010-9B4E-4779-9C8F-73D41DB21FF5", Name: "电动液压千斤顶（5000kN）", Num: "01", Code: "1030201", ParentId: "7E252277-187F-492F-8A43-DFF0D5F2F248" }
          ]
        }
      }
    }
  });
</script>